<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<!-- 定位，将元素正确的布局 
		     ①浮动定位：左右布局
			 
			 ②相对定位：微调布局针对单一元素    
			 position：relative；  声明元素进行相对定位
			 特点：相对于父级进行定位，不脱离文档流
			 附加属性：方向属性：left、top、right、bottom，属性值：+/-数字px;
			          Z轴叠加属性：z-index-----属性值：纯数值，数值越大越靠前
			 
			 ③绝对定位：做叠加，不能单独使用，与相对定位使用，
			           做左栏、侧边栏的弹出以及遮罩层
			   左栏---做挂靠点
			 position：absolute；声明元素进行绝对定位
			 特点：相对于祖先【页面左上顶角】进行定位
			       如果有父元素，按照父元素【左上顶角】、脱离文档流			 
			 使用方法：通常与相对定位搭配使用
			 			 
			 ④固定定位：fixed页面区域固定在页面上
			          相对/绝对/固定属性---附加属性全部通用：方向、叠加属性
			 
			 ⑤文档流定位：按照元素分类进行定位：块与块【纵排】
			                                行与行【横排】
											块与行【横排】
		-->
		
		<style>
			div{
				width: 300px;
				height: 300px;
			
			}
			.box1{
				background: url(img/狼堡.jpg);
				background-size: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				/*叠加属性*/
				z-index: 50;
				
			}
			.box2{
				background: url(img/img_2.png);	
				background-size: 100%;			
				position: absolute;
				left:0px;
				top: 0px;
				z-index: 55;
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		
	</body>
</html>